<template>
 <div id="Gd">
     <div class="titleImgBox">
         <img src="../../public/homeImg/recommGd.jpg" alt="">
         <div class="titleImgBox-rght">
             <span><span class="iconfont">
                &#xe655;
                </span> 精品歌单</span>
             <span>维密秀|历年受邀表演嘉宾助阵歌单</span>
             <span>历年受邀表演嘉宾助阵歌单</span>
         </div>
     </div>
     <div class="titleDh">
         <div class="titleLeft" style="position:relative" @click="extend()">
             <span class="buttonIcon" >全部订单 <span class="iconfont">
                &#xe65f;
                </span></span>
            <div id="pop" v-show="isShow">
             <div class="pop-title"><span>全部歌单</span></div>
             <div class="pop-bottom">
                 <div class="pop-bottom-box">
                     <div class=""><span class="iconfont iconStyle">&#xe640;</span><span>语种</span></div>
                     <ul>
                        <li v-for="(items,index) in tags" :key="index" v-if="items.category == 0">
                            <span class="ButtonBg">{{items.name}}</span>
                       
                        </li>
                          <!-- <li><span class="ButtonBg">{{hotTag[0].name}}</span></li> -->
                     </ul>
                 </div>
                 <div class="pop-bottom-box" >
                      <div class=""><span class="iconfont iconStyle">&#xe640;</span><span>风格</span></div>
                     <ul>
                         <li v-for="(items,index) in tags" :key="index" v-if="items.category == 1">
                            <span class="ButtonBg">{{items.name}}</span>
                       
                        </li>

                     </ul>
                 </div>
                 <div class="pop-bottom-box">
                     <div class=""><span class="iconfont iconStyle">&#xe640;</span><span>情感</span></div>
                     <ul>
                       <li v-for="(items,index) in tags" :key="index" v-if="items.category == 2">
                            <span class="ButtonBg">{{items.name}}</span>
                       
                        </li>
                     </ul>
                 </div>
                  <div class="pop-bottom-box">
                     <div class=""><span class="iconfont iconStyle">&#xe640;</span><span>场景</span></div>
                     <ul>
                         <li v-for="(items,index) in tags" :key="index" v-if="items.category == 3">
                            <span class="ButtonBg">{{items.name}}</span>
                       
                        </li>
                     </ul>
                 </div>
                 <div class="pop-bottom-box">
                     <div class=""><span class="iconfont iconStyle">&#xe640;</span><span>场景</span></div>
                     <ul>
                         <li v-for="(items,index) in tags" :key="index" v-if="items.category == 4">
                            <span class="ButtonBg">{{items.name}}</span>
                       
                        </li>
                     </ul>
                 </div>
             </div>
         </div>
      
         
         </div>
         <div class="titleRight">
             <ul ref="title">
                 <!-- <li style="background:#FDF5F5;color:#EC4141;" @click="animation2($event)">华语</li>
                 <li  @click="animation2($event)">流行</li> -->
                 <li v-for="(items,index) in hotTag" :key="index"  @click="animation2($event,items.name)" :class="{activeTag:index==0}">{{items.name}}</li>
             </ul>
         </div>

     </div>
     <div style="margin-top:15px">
         <keep-alive>
             <SlotRecommMV :data='listDataGD'></SlotRecommMV>
         </keep-alive>
     </div>
     
</div>   
</template>
<script>
import SlotRecommMV from '@/components/slotRecommMV.vue'
import api from '../utils/api'
import Services from '../utils/Service'
export default {
     data() {
         return {
             isShow:false,
             hotTag:[],
             //弹窗里面的分类数据
             tags:[],
             listDataGD:[
                
                {
                // type:'GD',
                // id:'图片1',
                // title:'不惧岁月|想在爱意随风起的时代和你慢慢来',
                // index:'',
                // "cover":require('../../public/homeImg/recommGd.jpg'),
                // titleH1:'独家放送',
            } 
            ]
         }
     },
      components: {
  SlotRecommMV
  },
  created() {
    this.getGagBar()
    this.tagsData()
    this.changeGd('华语')
  },
 methods: {
          async tagsData(){
           
      let res = await Services(api.tags);
      if(res.status == 200&&res.data.code==200){
         let getData= [...res.data.tags]
       this.tags = getData.map(function(item,index){
      return {
        name:getData[index].name,
        id:getData[index].id,
        hot:getData[index].hot,
        category:getData[index].category,
        
      }
    })
    console.log(this.tags)
      }else{
        console.log(res+'分类标签')
      }
    },
       async getGagBar(){
      let res = await Services(api.tagBar);
      if(res.status == 200&&res.data.code==200){
         let getData= [...res.data.tags]
        this.hotTag = getData.map(function(item,index){
      return {
        name:getData[index].name,
        id:getData[index].id,
        hot:getData[index].hot,
        category:getData[index].category
      }
    })
    console.log(this.hotTag)
      }else{
        console.log(res+'分类标签')
      }
    },
    
     extend(){
         console.log(this.isShow)
         this.isShow = !this.isShow;
     },
     animation2(e,hotCat){
          this.$nextTick(function () {
   for (let index = 0; index < this.$refs.title.childNodes.length; index++) {
      const element = this.$refs.title.childNodes[index].innerHTML;
       this.$refs.title.childNodes[index].style.background = "none";
        this.$refs.title.childNodes[index].style.color = " #9F9F9F";
      if(element == e.target.innerHTML  ){
         this.$refs.title.childNodes[index].style.background = " #FDF5F5";
      this.$refs.title.childNodes[index].style.color = " #EC4141";
      }}
          })
        this.changeGd(hotCat)
     },
     async changeGd(datas){
        console.log(datas)
        let data ={
            cat:datas,
            limit:30,
            offset:1
        }
        let res = await Services(api.playlistGd,data);
      if(res.status == 200&&res.data.code==200){
        
         let getData= [...res.data.playlists]
        //  console.log(getData)
        this.listDataGD = getData.map(function(item,index){
      return {
        name:getData[index].name,
        id:getData[index].id,
        playCount:getData[index].playCount,
        creator:getData[index].creator.description,
        coverImgUrl:getData[index].coverImgUrl,
        type:'GD'
      }
    })
    console.log(this.listDataGD)
      }else{
        console.log(res)
      }
     }
    
}
     }
</script>
<style lang="less" scoped>
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon2/iconfont.ttf?t=1658068442606') format('truetype');
}
    div,span,ul,li,img{
    font-size: 0;
}
#Gd{

    max-width: 95%;



    overflow: hidden;
    
    border: solid forestgreen 1px;
    // wiGDh: 7.1875rem /* 1380/192 */;
    // wiGDh: 1440px;
    margin: 0 auto;
    .titleImgBox{
        box-sizing: border-box;
        display: flex;
        padding: 20px;
        border-radius: 5px;
        height: 214px;
        background: #939093;
        img{
            height: 164px;
            wiGDh: 164px;
            border-radius: 5px;
        }
        span{
            margin-left: 10px;
            display: block;
            // margin-top: 20px;
        }
        .titleImgBox-rght>span:first-child{
            border: 1px solid ;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            border-radius:20px ;
            padding: 8px 8px;
            color: #F2B262;
        }
        .titleImgBox-rght>span:nth-child(2){
            color: #FFFFFF;
        }
        .titleImgBox-rght>span:nth-child(3){
            color: #B0B0AF;
            font-size: 14px;
            margin-top: 10px;
        }
    }

    .titleDh{
        margin-top: 20px;
         
        .buttonIcon{
            border: 1px solid ;
            display: table;
            font-size: 16px;
            border-radius:20px ;
            padding: 8px 15px;
            color: #F2B262;
            float: left;
        }
       
        .titleRight {
            float: right;
            ul{
            display: flex;
            .activeTag{
        background: #FDF5F5;
    color: #EC4141;
    }
            li{
                    

                    font-size: 15px;
                    margin-right: 10px;
                    color: #9F9F9F;
                    /* line-height: 39px; */
                    // background: #FDF5F5;
                    border-radius: 10px;
                    padding: 3px 10px;

            }
             li:hover{
                    color: #2E282E;
                }
        }
    }
    }
    .titleDh::after{
            display:  block;
            content:'';
            clear:both;
    }
.popShow{
    display: none !important;
}
#pop{
    .iconStyle{
        font-size: 30px !important;
        color: #999999;
    }
    width: 934px;
    position: absolute;
    z-index: 99;
    background: #FFFFFF;
    top: 42px;
    font-weight: 300;
    border: 1px solid #E5E5E5;
    box-shadow: 0 0 30px rgb(0 0 0 / 10%);
    border-radius: 8px;
    .pop-title{
     padding: 28px 42px;
     border: 1px solid #E5E5E5;
     span{
         font-size: 19px;
     }
      span:hover{
            color: #EC4141;
        }
    }
    .pop-bottom{
        .pop-bottom-box{
            display: flex;
                box-sizing: border-box;
            padding:27px 26px ;
            div:first-child{
                width: 20%;
                color:  #999999;
                display: flex;
                align-items: center;
            }
            ul{
                width: 80%;
                     display: flex;
                    flex-wrap: wrap;
                     align-items: center;
                li{
                    width:16.6% ;
                    font-size: 15px;
                    color: #222;
                    margin: 12px 0;
                    span{
                        padding: 4px 9px;
                    }
                    .ButtonBg{
                        background: rgb(253, 245, 245);
                            color: rgb(236, 65, 65);
                            border-radius: 12px;
                        }
                    }
                    .HOT{
                        font-size: 4px !important;
                    }
                }
            }
             span{
                  font-size: 15px;
             }
        }
        
    }
}


    


</style>